import React, { useEffect, useRef } from "react";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GC from "@grapecity/spread-sheets";
import { Designer } from "@grapecity/spread-sheets-designer-react";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

GC.Spread.Common.CultureManager.culture("zh-cn");
export default () => {
  const d = useRef();
  useEffect(() => {
    var designerConfig = JSON.parse(
      JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
    );

    designerConfig.commandMap = {


      "myCmd":{
  
        text: "Write 11 in Console",
        commandName: "myCmd",
        execute: () =>{
          alert("11");
          console.log("测试")
        }
      }
      
    }

    designerConfig.contextMenu.push("myCmd");
    var designer = new GC.Spread.Sheets.Designer.Designer(
      document.getElementById("designer") /**designer host */,
      designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */
    );

  }, []);
  return (
    <Designer
      styleInfo={{ width: "100%", height: "calc(100vh - 230px)" }}
      ref={d}
    />
  );
};
